<template>
	<view v-if="dataShow" :style="{'top': maskTop + 'px', zIndex: zIndex}" class="lib-component-modal-mask">
		<view :style="outerStyle" :class="outerClass" class="modal">
			<view class="modal-header">
				<view class="modal-title">{{label}}</view>
				<view class="flex1"></view>
				<view @click="()=>close()" class="iconfont icon-remove close-icon"></view>
			</view>
			<view :style="contentStyle" class="modal-content">
				<view class="header">
					<slot name="header"></slot>
				</view>
				<scroll-view :style="{'height': contentHeight + 'px'}" :scroll-y="true" @scroll="handleScroll"
					class="content">
					<slot name="content"></slot>
				</scroll-view>
				<!-- <scroll-view :scroll-y="true" @scroll="handleScroll"
					class="content">
					<slot name="content"></slot>
				</scroll-view> -->
				<view class="footer">
					<slot name="footer"></slot>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		Platform
	} from '../../utils/platform/platform';

	export default {
		name: 'lib-modal',
		emit: ['onClose', 'update:show'],
		props: {
			outerStyle: {
				type: Object,
				default: () => {
					return {};
				},
				required: false,
			},
			contentStyle: {
				type: Object,
				default: () => {
					return {};
				},
				required: false,
			},
			outerClass: {
				type: String,
				default: '',
				required: false,
			},
			zIndex: {
				type: Number,
				default: 1,
				required: false,
			},
			label: {
				type: String,
				default: '',
			},
			/** v-model="showModal" v-model:show="showModal" */
			show: {
				type: Boolean,
				default: false,
			},
			modelValue: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				/** content 高度 */
				contentHeight: 0,
				/** mask top */
				maskTop: 0,
				/** 是否显示 */
				dataShow: false,
			}
		},
		methods: {
			/** 获取header高度 */
			async getHeaderHeight() {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select(".header")
						.boundingClientRect((data) => {
							const height = (data).height || 0;
							resolve(height);
						})
						.exec();
				});
			},
			/** 获取footer高度 */
			async getFooterHeight() {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select(".footer")
						.boundingClientRect((data) => {
							const height = (data).height || 0;
							resolve(height);
						})
						.exec();
				});
			},
			/** 获取modal高度 */
			async getModalHeight() {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select(".modal")
						.boundingClientRect((data) => {
							const height = (data).height || 0;
							resolve(height);
						})
						.exec();
				});
			},
			/** 设置content高度 */
			async setContentHeight() {
				if (Platform.isMp) {
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					/** 胶囊按钮高度 */
					const menuHeight = menuButtonInfo.height;
					/** 胶囊按钮top */
					const menuTop = menuButtonInfo.top;
					this.maskTop = menuHeight + menuTop;
				}
				const headerHeight = await this.getHeaderHeight();
				const modalHeight = await this.getModalHeight();
				const footerHeight = await this.getFooterHeight();
				this.contentHeight = modalHeight - headerHeight - footerHeight - 50;
			},
			/** 关闭 */
			close() {
				this.$emit('update:show', false);
				this.$emit("update:modelValue", false);
				this.$emit('onClose');
			},
			/** 滚动事件 */
			handleScroll(event) {

				// h5 没有这个
				if (event.preventDefault) {
					event.preventDefault();
				}
				if (event.stopPropagation) {
					event.stopPropagation();
				}
			},
			stopTouch(event) {
				console.log(event);
				// event.preventDefault();
			},
		},
		created() {
			// this.$watch()
			this.$watch('show', function(newValue, oldValue) {
				// console.log('show已变化：', oldValue, '->', newValue);
				this.dataShow = newValue;
				if (newValue === true) {
					this.$nextTick(async () => {
						await this.setContentHeight();
					});
				}
			}, {
				immediate: true
			});
			this.$watch('modelValue', function(newValue, oldValue) {
				// console.log('modelValue已变化：', oldValue, '->', newValue);
				this.dataShow = newValue;
				if (newValue === true) {
					this.$nextTick(async () => {
						await this.setContentHeight();
					});
				}
			}, {
				immediate: true
			});
		},
		updated() {
			// console.log('updated');
			// await this.setContentHeight();
		},
		async mounted() {

		},
		destroyed() {},
		unmounted() {}
	}
</script>




<style lang="scss">
	@import "../../font/iconfont.css";
	@import "./lib-modal.scss";
</style>